<template>
  <a-row>
    <a-col :span="5">
      <back></back>
    </a-col>
    <a-col :span="17">
      <div class="searchContainer">
        <div class="searchIcon">
          <img src="@/assets/search.png" width="20" height="20">
        </div>
        <div class="searchText">
          <input type="text" @keyup.enter="search" :placeholder="defaultPlaceHolder" ref="search">
        </div>
      </div>
    </a-col>
    <!--    听歌识曲 -->
    <a-col :span="2">
      <distinguish></distinguish>
    </a-col>
  </a-row>

</template>

<script>
import Back from "@/components/web/search/Back";
import Distinguish from "@/components/web/search/Distinguish";
import {searchDefault, search} from "@/api/api";

export default {
  name: "search",
  props: {
    searchEvent: {
      type: Object
    }
  },
  components: {Distinguish, Back},
  comments: {
    Back, Distinguish
  },
  data() {
    return {
      defaultPlaceHolder: '',
    }
  },
  mounted() { // 获取默认搜索关键词
    let _this = this;
    searchDefault().then(res => {
      if (res.code == 200) {
        _this.defaultPlaceHolder = res.data.realkeyword
      }
    })
  },
  methods: {
    search() {
      let _this = this;
      let searchText = this.$refs.search.value;
      if (!searchText) {
        searchText = this.defaultPlaceHolder;
      }
      let params = {
        'keywords': searchText
      }
      search(params).then(res => {
        _this.$store.commit("SET_SEARCH_RESULT_DATA", res.result)
        _this.$emit('searchEvent');
      })
    }
  }
}
</script>

<style scoped>
.searchContainer {
  padding: 0;
  margin: 0.2rem 1rem;
  height: 1.8rem;
  border-radius: 2rem;
  display: flex;
  background-color: #e20000;
  /*overflow: hidden;*/
}

.searchIcon {
  width: 12%;
  height: 100%;
  display: flex;
  align-items: center;
}

.searchIcon img {
  margin: 0 auto;
}

.searchText {
  width: 83%;
  height: 100%;
  display: inline-block;
  display: flex;
  align-items: center;
}

input {
  color: white;
  width: 100%;
  height: 70%;
  background-color: transparent;
  outline-color: invert;
  outline-style: none;
  outline-width: 0px;
  border: none;
  border-style: none;
  text-shadow: none;
  -webkit-appearance: none;
  -webkit-user-select: text;
  outline-color: transparent;
  box-shadow: none;
}

::-webkit-input-placeholder {
  color: white;
}
</style>
